
import React from 'react';
import {
	Row,
	Col,
	Table,
	Spin,
	Button,
	Pagination,
	Tabs,
	message,
	Modal,
	Form,
	Input,
	Select,
	Icon,
	Divider,
	Alert
} from 'antd';
import { connect } from 'dva';
const FormItem = Form.Item;
const confirm = Modal.confirm;
const Option = Select.Option;
import { Document, Page, pdfjs } from 'react-pdf';
import FileViewer from 'react-file-viewer';
import PDF from 'react-pdf-js';
import { PDFReader } from 'react-read-pdf';
import RightClick from './rightClick'
import style from './Welcome.less';
import { throwStatement } from '@babel/types';


export default class Welcome extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			visible: false
		};
	}
	componentDidMount() {
		pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
		document.addEventListener('contextmenu', this._handleContextMenu);
	}
	_handleContextMenu = (event) => {

		// this.setState({ visible:false });//当点击其他地方右键时可以根据需求来判断是否需要先关闭菜单
		event.preventDefault();

		//获取我们自定义的右键菜单
		var menu = document.querySelector("#menu");
		const clickX = event.clientX;
		const clickY = event.clientY;               //事件发生时鼠标的Y坐标
		const screenW = window.innerWidth;   //文档显示区的宽度
		const screenH = window.innerHeight;
		const rootW = menu.offsetWidth;     //右键菜单本身元素的宽度
		const rootH = menu.offsetHeight;

		// right为true，说明鼠标点击的位置到浏览器的右边界的宽度可以放contextmenu。

		// 否则，菜单放到左边。 // top和bottom，同理。

		const right = (screenW - clickX) > rootW;
		const left = !right;
		const top = (screenH - clickY) > rootH;
		const bottom = !top;

		if (right) {
			menu.style.left = `${clickX - 279.5}px`;
		}

		if (left) {
			menu.style.left = `${clickX - rootW - 280}px`;
		}

		if (top) {
			menu.style.top = `${clickY - 88}px`;
		}

		if (bottom) {
			menu.style.top = `${clickY - rootH - 88}px`;
		}
		//根据事件对象中鼠标点击的位置，进行定位
		/* menu.style.left = event.clientX + 'px';
		menu.style.top = event.clientY + 'px'; */

		//改变自定义菜单的宽，让它显示出来
		this.setState({visible:true})
	};
	/*  */
	render() {
		//ERP编号、项目编号、项目名称
		console.log(this.state)

		return (
			<div>
				{/* <h1>iframe</h1>
        <iframe
          style={{ width: '595px', height: '841px' }}
          src={'http://www.cztouch.com/upfiles/soft/testpdf.pdf'}
          frameBorder="0"
        ></iframe>
        <h1>React-pdf</h1>
        {
          <Document
            file={'/upfiles/soft/testpdf.pdf'} //文件路径
            //onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用
            onLoadError={console.error} //加载失败时调用
            renderMode="canvas" //定义文档呈现的形式
            loading="正在努力加载中" //加载时提示语句
            //externalLinkTarget="_blank"
          >
            <Page pageNumber={1} />
          </Document>
        }
        <h1>React-pdf-js</h1>
        <PDF file={'/upfiles/soft/testpdf.pdf'} page={1} />
        <h1>react-file-viewer</h1>
        <FileViewer
          fileType="pdf" //文件类型
          filePath={'/upfiles/soft/testpdf.pdf'} //文件地址（后台给返的二进制流也可以）
          // onError={this.onError.bind(this)} //函数[可选]：当文件查看器在获取或呈现请求的资源时发生错误时将调用的函数。在这里可以传递日志记录实用程序的回调。
          //   errorComponent={console.log('出现错误')} //[可选]：发生错误时呈现的组件，而不是react-file-viewer随附的默认错误组件。
          //   unsupportedComponent={console.log('不支持')} //[可选]：在不支持文件格式的情况下呈现的组件。
        />
				<h1>react-read-pdf</h1>
				<PDFReader width='595' url={"/upfiles/soft/testpdf.pdf"} /> */}
				{/* <RightClick></RightClick> */}
				<div style={{ width: '100%', height: '100%', backgroundColor: 'blue', zIndex: '999' }}></div>
				{/* <div id="menu" className={style.menu1} style={{ zIndex: '99', width: '20%', height: '180px',backgroundColor:'#1890ff',color:'#fff'}}>
					<h3>我是右键菜单</h3>
					<div class="menu">功能1</div>
					<div class="menu">功能2</div>
					<div class="menu">功能3</div>
					<div class="menu">功能4</div>
					<div class="menu">功能5</div>
				</div> */}
				<div id="menu" style={{ position: 'absolute'}}>
					<Alert style={{display:this.state.visible?'inline-block':'none',width:'220px'}} message="这里并没有蛋糕可以吃" type="error" showIcon closable />
				</div>
			</div>
		);
	}
}
